<template>
  <div class="home">
    <HelloWorld3/>
    <div class="banner"> <img src="../assets/3.jpg" alt=""></div>
    <!-- 订酒店 -->
    <div class="main">
      <h1>订酒店</h1>
      <div class="main_intro">
        <input type="text" placeholder="出行目的地">
        <div><el-date-picker  type="datetime" placeholder="入住日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker></div>
        <div><el-date-picker  type="datetime" placeholder="离店日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker></div>
      </div>
      <div class="title"><p @click="show1">全部</p>|<p @click="show2">国内</p>|<p @click="show3">海外</p></div>
      <!-- six——main -->
      <div class="main_six" v-show="yes1">
        <!-- 第一个盒子 -->
        <router-link to="/detail3">
          <div class="main_six1">
            <div class="main_six1_left"><img src="../assets/8.jpg" alt=""></div>
            <div class="main_six1_right">
              <div class="main_six1_right_fonts">
                <h1>普吉岛连锁度假酒店</h1>
                <p>
                  普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店
                </p>
                <p class="yuan">￥998</p>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 1end -->
        <!-- 第2个盒子 -->
        <router-link to="/detail3">
          <div class="main_six1">
            <div class="main_six1_left"><img src="../assets/8.jpg" alt=""></div>
            <div class="main_six1_right">
              <div class="main_six1_right_fonts">
                <h1>普吉岛连锁度假酒店</h1>
                <p>
                  普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店
                </p>
                <p class="yuan">￥998</p>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 2end -->
        <!-- 第3个盒子 -->
        <router-link to="/detail3">
          <div class="main_six1">
            <div class="main_six1_left"><img src="../assets/8.jpg" alt=""></div>
            <div class="main_six1_right">
              <div class="main_six1_right_fonts">
                <h1>普吉岛连锁度假酒店</h1>
                <p>
                  普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店
                </p>
                <p class="yuan">￥998</p>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 3end -->
        <!-- 第4个盒子 -->
        <router-link to="/detail3">
          <div class="main_six1">
            <div class="main_six1_left"><img src="../assets/8.jpg" alt=""></div>
            <div class="main_six1_right">
              <div class="main_six1_right_fonts">
                <h1>普吉岛连锁度假酒店</h1>
                <p>
                  普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店
                </p>
                <p class="yuan">￥998</p>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 4end -->
        <!-- 第5个盒子 -->
        <router-link to="/detail3">
          <div class="main_six1">
            <div class="main_six1_left"><img src="../assets/8.jpg" alt=""></div>
            <div class="main_six1_right">
              <div class="main_six1_right_fonts">
                <h1>普吉岛连锁度假酒店</h1>
                <p>
                  普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店
                </p>
                <p class="yuan">￥998</p>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 5end -->
        <!-- 第6个盒子 -->
        <router-link to="/detail3">
          <div class="main_six1">
            <div class="main_six1_left"><img src="../assets/8.jpg" alt=""></div>
            <div class="main_six1_right">
              <div class="main_six1_right_fonts">
                <h1>普吉岛连锁度假酒店</h1>
                <p>
                  普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店
                </p>
                <p class="yuan">￥998</p>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 6end -->
      </div>
      <!-- 国nei -->
      <div class="main_six" v-show="yes2">
        <!-- 第一个盒子 -->
        <router-link to="/detail3">
          <div class="main_six1">
            <div class="main_six1_left"><img src="../assets/8.jpg" alt=""></div>
            <div class="main_six1_right">
              <div class="main_six1_right_fonts">
                <h1>不知道岛连锁度假酒店</h1>
                <p>
                  普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店
                </p>
                <p class="yuan">￥998</p>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 1end -->
        <!-- 第2个盒子 -->
        <router-link to="/detail3">
          <div class="main_six1">
            <div class="main_six1_left"><img src="../assets/8.jpg" alt=""></div>
            <div class="main_six1_right">
              <div class="main_six1_right_fonts">
                <h1>普吉岛连锁度假酒店</h1>
                <p>
                  普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店
                </p>
                <p class="yuan">￥998</p>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 2end -->
        <!-- 第3个盒子 -->
        <router-link to="/detail3">
          <div class="main_six1">
            <div class="main_six1_left"><img src="../assets/8.jpg" alt=""></div>
            <div class="main_six1_right">
              <div class="main_six1_right_fonts">
                <h1>普吉岛连锁度假酒店</h1>
                <p>
                  普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店
                </p>
                <p class="yuan">￥998</p>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 3end -->
      </div>
      <!-- 海外 -->
      <div class="main_six" v-show="yes3">
        <!-- 第一个盒子 -->
        <router-link to="/detail3">
          <div class="main_six1">
            <div class="main_six1_left"><img src="../assets/8.jpg" alt=""></div>
            <div class="main_six1_right">
              <div class="main_six1_right_fonts">
                <h1>三亚连锁度假酒店</h1>
                <p>
                  普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店
                </p>
                <p class="yuan">￥998</p>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 1end -->
        <!-- 第2个盒子 -->
        <router-link to="/detail3">
          <div class="main_six1">
            <div class="main_six1_left"><img src="../assets/8.jpg" alt=""></div>
            <div class="main_six1_right">
              <div class="main_six1_right_fonts">
                <h1>钓鱼岛连锁度假酒店</h1>
                <p>
                  普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店普吉岛连锁度假酒店
                </p>
                <p class="yuan">￥998</p>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 2end -->
      </div>
    </div>
    <div class="more">加载更多</div>
    <!-- end -->
    <HelloWorld2/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld3 from '@/components/HelloWorld3.vue'
import HelloWorld2 from '@/components/HelloWorld2.vue'
export default {
  name: 'HomeView',
  components: {
    HelloWorld3,
    HelloWorld2
  },
  data(){
    return{
      yes1:true,
      yes2:false,
      yes3:false
    }
  },
   methods:{
    show1:function(){
   
      this.yes1=true
      this.yes2=false
      this.yes3=false
     
    },
    show2:function(){
      this.yes1=false
      this.yes2=true
      this.yes3=false
      
    },
     show3:function(){
      this.yes1=false
      this.yes2=false
      this.yes3=true
      
    },}
   
}
</script>
<style scoped lang="less">
*{margin: 0;padding: 0;}
.banner{width: 100%;img{width: 100%;height: 600px;}}
.main{width: 80%;margin: 0px auto;h1{margin: 40px 0;}}
.main_intro{justify-content: space-between;margin: 20px 0;display: flex;flex-direction: row;
input{font-size: 20px;color: gray;border-radius: 5px;border:1px solid #a5a5a5;}}
.main_intro input{border-radius: 5px;padding: 0 10px;width: 48%;}
.title{display: flex;flex-direction: row;color:#a5a5a5;p{&:first-child,&:hover{background-color: #5199d2;color: white;}padding: 3px 10px;color: black;}margin: 10px 20px;font-size: 25px;}
.main_six{display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap;a{text-decoration: none;width: 48%;display: flex;flex-direction: row;justify-content: space-between;margin:30px 0; box-shadow: 5px 0px 10px 0px rgb(242, 242, 242),/*上边阴影  红色*/0px 0px 0px 0px green,/*左边阴影  绿色*/5px 0px 10px 0px rgb(242, 242, 242),/*右边阴影  蓝色*/0px 5px 10px 0px rgb(242, 242, 242);/*下边阴影  粉色*/}h1{color: black;}}
.main_six1{display: flex;flex-direction: row;justify-content: space-between;}
.main_six1_left{width: 50%;img{width: 100%;}}
.main_six1_right{width: 48%;padding:1% 3%;h1{font-weight: normal;font-size: 25px;margin: 20px 0;}p{color: gray;margin: 100px 0;line-height: 25px;}}
.main_six1_right_fonts p:last-child{font-size: 25px;color: orange;margin: 0;}
.more{width: 50%;background-color: #fff5e5;text-align: center;font-size: 20px;padding: 10px 0;margin:20px auto}
.el-input--prefix .el-input__inner {
    // padding-left: 30px;
    padding: 10px 0 10px 30px;
}
</style>